<template>
  <div>
    <div class="mk-bill-panel-button">
      <MkButtonAdd @click="newEntity" :isEdit="ctx.isEdit" />
      <MkButtonSubmit @click="submit" :loading="ctx.loading" :color="getThemeAdjustColor(10)" />
      <el-button icon="ele-Printer" type="primary" :color="getThemeAdjustColor(-10)">打印</el-button>
    </div>
    <MkPanel title="标本信息">
      <MkForm>
        <MkInput label="申请单号" v-model.trim="ctx.shenQingDanHao" :isEdit="ctx.isEdit && !ctx.isEnterDanHao" @keyup.enter="enterDanHao" ref="shenQingDanHaoRef" />
        <MkInput label="标本号" v-model.trim="ctx.biaoBenHao" :isEdit="ctx.isEdit && ctx.isEnterDanHao" ref="biaoBenHaoRef" />
        <el-form-item label="患者信息">
          <MkPatient v-model="ctx.huanZhe" />
        </el-form-item>
      </MkForm>
    </MkPanel>
    <MkPanel title="标本记录">
      <ol class="recordOl">
        <li>2025-05-21 08:49:39, 由 <b>医生2</b> <b>创建</b></li>
        <li>2025-05-21 10:10:22, 由 <b>护士1</b> <b>打印</b>标本。</li>
        <li>2025-05-21 10:12:24, 由 <b>护士2</b> <b>采集</b>标本。</li>
        <li>2025-05-21 10:28:12, 由 <b>护工1</b> <b>送出</b>标本。</li>
        <li>2025-05-22 14:57:45, 由 <b>护工1</b> <b>送达</b>标本。</li>
        <li>2025-05-29 19:31:34, 由 <b>护士5</b> <b>接收</b>标本。</li>
      </ol>
    </MkPanel>
  </div>
</template>

<script lang='ts' setup>
// 导入 TraShenQingHuanZheOutput 类型，该类型来自 '/@/api/tra/TraShenQing' 模块
import { TraShenQingHuanZheOutput } from '/@/api/tra/TraShenQing'
// 导入工具函数 getThemeAdjustColor 和 isNull，来自 '/@/utils/index' 模块
import { getThemeAdjustColor, isNull } from '/@/utils/index'
import { reactive, ref, nextTick } from 'vue'

// 定义初始化状态的函数，返回一个包含初始值的对象
const initState = () => ({
  // 标识是否可编辑，初始值为 true
  isEdit: true,
  // 是否回车单号
  isEnterDanHao: false,
  // 标识是否正在加载，初始值为 false
  loading: false,
  // 申请单号，初始值为 undefined
  shenQingDanHao: undefined,
  // 标本号，初始值为 undefined
  biaoBenHao: undefined,
  // 患者信息，初始化为 TraShenQingHuanZheOutput 类型的空对象
  huanZhe: {} as TraShenQingHuanZheOutput
})
// 使用 reactive 创建响应式对象 ctx，初始值由 initState 函数返回
const ctx = reactive(initState())

// 创建申请单号输入框的引用
const shenQingDanHaoRef = ref()
// 创建标本号输入框的引用
const biaoBenHaoRef = ref()

// 定义新建实体的函数，用于重置表单状态并聚焦到申请单号输入框
const newEntity = () => {
  // 将 ctx 对象的属性重置为 initState 函数返回的初始值
  Object.assign(ctx, initState())
  // 在下一个 DOM 更新周期后，聚焦到申请单号输入框
  nextTick(() => {
    shenQingDanHaoRef.value?.focus()
  })
}

// 定义提交函数，目前为空，可后续添加提交逻辑
const submit = () => {

}

// 定义当在申请单号输入框按下回车键时触发的函数
const enterDanHao = () => {
  // 如果申请单号为空，则直接返回
  if (isNull(ctx.shenQingDanHao)) {
    return
  }
  // 模拟填充患者信息
  ctx.huanZhe = {
    huanZheId: '00100010',
    xingMing: '张三',
    xingBie: '男',
    chuShaiABO: 'A',
    chuShaiRhD: '+',
    nianLing: '30',
    bingQu: 'A病区',
    chuangHao: '01',
    jiuZhenLeiXing: '住院'
  } as TraShenQingHuanZheOutput
  ctx.isEnterDanHao = true
  // 在下一个 DOM 更新周期后，聚焦到标本号输入框
  nextTick(() => {
    biaoBenHaoRef.value?.focus()
  })
}

// 定义根据行数据获取信息并填充表单的函数
const getByRow = (row: any) => {
  // 如果行数据或行数据的 id 为空，则直接返回
  if (isNull(row) || isNull(row.id)) return
  // 将行数据的 id 赋值给申请单号
  ctx.shenQingDanHao = row.id
  // 调用 enterDanHao 函数填充患者信息并聚焦到标本号输入框
  enterDanHao()
}
// 暴露 getByRow 函数，使父组件可以调用
defineExpose({ getByRow })
</script>

<style lang='scss' scoped>
.mk-bill-panel-button {
  padding: 10px;
  border-bottom: 1px solid #eeeeee;
  margin-bottom: 10px;

  :deep(.el-button + .el-dropdown) {
    margin-left: 12px !important;
  }

  :deep(.el-dropdown + .el-button) {
    margin-left: 12px !important;
  }

  :deep(.el-dropdown + .el-dropdown) {
    margin-left: 12px !important;
  }
}

.recordOl {
  li {
    padding: 3px 0;
  }
}
</style>